<!--
 * @Description: 视频审核记录弹窗
 * @Author: liyujie
 * @Date: 2021/05/10
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/10
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            width="776px"
            :close-on-click-modal="false"
        >
            <div
                slot="title"
                class="dialog-title"
            >
                <div class="title-text">操作记录</div>
                <div class="title-tips">（记录对该批次组进行操作的所有账号记录（包含此账号），仅保留1年的数据）</div>
            </div>
            <div class="dialog-content">
                <div class="table-view">
                    <el-table
                        :data="tableData"
                        height="432"
                        class="data-table"
                        :cell-style="{height: '56px'}"
                        v-loading="tableLoading"
                    >
                        <el-table-column
                            label="序号"
                            align="center"
                            width="60"
                            type="index"
                        />
                        <el-table-column
                            prop="admin_true_name"
                            label="操作人"
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="操作事项"
                            align="left"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.type | typeFilter }}{{ scope.row.count }}个视频
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作时间"
                            align="left"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.history_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- /分页 -->
                    <div class="pagination-wrapper clearfix">
                        <el-pagination
                            layout="total, prev, pager, next, jumper"
                            background
                            :current-page.sync="page.now_page"
                            :total="page.total_count"
                            :page-size="page.page_size"
                            @current-change="getTableData"
                        />
                    </div>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: "OperationRecordDialog",
    data() {
        return {
            series_no: '',
            dialogVisible: false,
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            tableLoading: false
        };
    },
    filters: {
        //1:初审通过,2:初审不通过,3:初审通过撤回,4:初审不通过撤回,5:二审通过,6:二审不通过
        typeFilter(val) {
            switch (val) {
                case 1:
                    return '初审通过';
                case 2:
                    return '初审不通过';
                case 3:
                    return '初审通过撤回';
                case 4:
                    return '初审不通过撤回';
                case 5:
                    return '二审通过';
                case 6:
                    return '二审不通过';
                default:
                    return '--';
            }
        }
    },
    methods: {
        /**
         * 显示弹窗
         */
        show(series_no) {
            this.series_no = series_no;
            this.getTableData();
            this.dialogVisible = true;
        },

        /**
         * 显示弹窗
         */
        getTableData() {
            this.tableLoading = true;
            let params = {
                series_no: this.series_no
            };

            this.$post('/student/room_series_video%5Cget_verify_history_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .table-view {
        margin: 12px 0 32px 0;
        /deep/ .el-table {
            border: 1px solid #eee;
            border-bottom: 0;
            border-radius: 4px 4px 0 0;
            th {
                background: #F4F4F4!important;
            }
            td {
                background: #FBFBFB!important;
            }
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 16px;
        padding-bottom: 16px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .dialog-title {
            display: flex;
            .title-text {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }
            .title-tips {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-left: 12px;
            }
        }
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    .pagination-wrapper {
        padding: 0 24px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: #FBFBFB;
        box-shadow: 0 1px 0 0 #EEEEEE;
        border-radius: 0 0 4px 4px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        // 操作按钮
        .option-btn-group {
            .el-button {
                margin-left: 0;
                margin-right: 10px;
            }
        }
    }
}
</style>
